<template>
  <div>
    <vxe-table
      show-footer
      border
      height="100%"
      :data="baseTable"
      :footer-data="footerData"
    >
      <vxe-column field="seq" type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="姓名" sortable></vxe-column>
      <vxe-column field="sex" title="性别" sortable></vxe-column>
      <vxe-column field="role" title="权限" sortable></vxe-column>
      <vxe-column field="age" title="年龄" sortable></vxe-column>
      <vxe-column
        field="address"
        title="地址"
        show-overflow
        sortable
      ></vxe-column>
    </vxe-table>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from "vue";
import type { VxeTablePropTypes } from "vxe-table";
import baseTable from "./json/baseTable.json";

const footerData = ref<VxeTablePropTypes.FooterData>([
  { seq: "合计", age: "185" },
]);
</script>